<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  </head>

  <body>
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.NewPlanController" id="form-page" class="container-pf-nav-pf-vertical container-fluid apiman-entity-new page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <h2 class="title" apiman-i18n-key="new-plan">New Plan</h2>
      </div>
      <!-- Helpful hint -->
      <div class="row">
        <p apiman-i18n-key="new-plan-help-text" class="col-md-6 apiman-label-faded">Create a new plan within the specified organization, allowing you to assign groups of policies to APIs.</p>
      </div>
      <!-- HR -->
      <div class="row hr-row">
        <hr/>
      </div>
      <!-- Choose org and plan name -->
      <div class="row">
        <dl class="org">
          <dt apiman-i18n-key="organization">Organization</dt>
          <dd>
            <div class="btn-group">
              <button type="button" id="selector-org" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span id="selector-org-value">{{selectedOrg.name}}</span> &nbsp;&nbsp;<span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li ng-repeat="org in organizations"><a href="#" ng-click="setOrg( org )">{{ org.name }}</a></li>
              </ul>
            </div>
          </dd>
        </dl>
        <dl class="slash">
          <dt apiman-i18n-skip>&nbsp;</dt>
          <dd>
            <span class="divider" apiman-i18n-skip>/</span>
          </dd>
        </dl>
        <dl class="name">
          <dt apiman-i18n-key="plan-name">Plan Name</dt>
          <dd>
            <input ng-model="plan.name" type="text" class="apiman-form-control form-control entityname" id="apiman-entityname" apiman-i18n-key="enter-plan-name" placeholder="Enter plan name...">
          </dd>
        </dl>
      </div>
      <!-- Initial Plan Version -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="initial-version">Initial Version</dt>
          <dd>
            <input ng-model="plan.initialVersion" type="text" class="apiman-form-control form-control version" id="apiman-version" value="1.0">
          </dd>
        </dl>
      </div>
      <!-- Description of plan -->
      <div class="row">
        <dl>
          <dt apiman-i18n-key="description">Description</dt>
          <dd>
            <textarea ng-model="plan.description" class="apiman-form-control form-control description" id="apiman-description" apiman-i18n-key="enter-plan-description" placeholder="Enter plan description (optional)..."></textarea>
          </dd>
        </dl>
      </div>
      <!-- HR -->
      <div class="row hr-row">
        <hr/>
      </div>
      <!-- Create Button -->
      <div class="row">
        <button id="create-plan" apiman-action-btn="" class="btn btn-primary" data-field="createButton" apiman-i18n-key="create-plan" placeholder="Creating..." data-icon="fa-cog"  ng-click="saveNewPlan()">Create Plan</button>
        <a id="cancel" href="javascript:window.history.back()" class="btn btn-default btn-cancel" data-field="cancelButton" apiman-i18n-key="cancel">Cancel</a>
      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </body>
</html>
